<template>
	<view class="rider-mine">
		<UserInfo :riderInfo="riderInfo" />
		<view class="content">
			<!-- 我的钱包 -->
			<view class="wallet" @tap="nav('/pages/riderPages/myWallet/myWallet?type=rider_deposit&price='+riderInfo.rider_deposit)">
				<view class="left">
					<view class="title"> 我的钱包 </view>
					<view class="price"> {{riderInfo.rider_deposit}} </view>
				</view>
				<image src="/static/icon/rider/right.png" class="w-img"/>
			</view>
			<view class="billing-details">
				<view class="item" @tap="nav('/pages/riderPages/billingDetails/billingDetails?type=0')">
					<view class="label">
						<image src="/static/icon/rider/price.png" class="l-img"/>
						<text> 账单明细 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="nav('/pages/riderPages/withdrawal/withdrawal')">
					<view class="label">
						<image src="/static/icon/rider/wallect.png" class="l-img"/>
						<text> 提现设置 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
			</view>
			<view class="rider-status">
				<!-- #ifdef MP-WEIXIN -->
				<view class="item" @tap="goMyMsg">
					<view class="label">
						<image src="/static/icon/rider/message.png" class="l-img"/>
						<text> 我的消息 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<!-- #endif -->
				<view class="item">
					<view class="label">
						<image src="/static/icon/rider/list.png" class="l-img"/>
						<text> 接单状态 </text>
					</view>
					<view class="value" @tap="switchStatus">
						<image v-if="riderInfo.on_line == 1" class="switch" src="/static/icon/mine/a-switch.png" mode="widthFix" />
						<image v-else class="switch" src="/static/icon/mine/switch.png" mode="widthFix" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						<image src="/static/icon/rider/timeup.png" class="l-img"/>
						<text> 工作时间 </text>
					</view>
					<view class="value" @tap="selectTimeRef.open()">
						<text> {{riderInfo.work_start_time&&riderInfo.work_over_time?riderInfo.work_start_time+ '至' +riderInfo.work_over_time:'设置自己接单的工作时间'}} </text>
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="nav('/pages/riderPages/riderScope/riderScope?region='+riderInfo.apply.region)">
					<view class="label">
						<image src="/static/icon/rider/location.png" class="l-img"/>
						<text> 配送范围 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
			</view>
			<view class="cooper-shop">
				<view class="item" @tap="nav('/pages/riderPages/cooperShop/cooperShop')">
					<view class="label">
						<image src="/static/icon/rider/shop.png" class="l-img"/>
						<text> 合作商户 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="nav('/pages/riderPages/MyAssessment/MyAssessment?score='+riderInfo.score)">
					<view class="label">
						<image src="/static/icon/rider/review.png" class="l-img"/>
						<text> 我的评价 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="call">
					<view class="label">
						<image src="/static/icon/mine/kf.png" class="l-img"/>
						<text> 联系客服 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
			</view>
			<view class="logout" @tap="goHome">
				<view class="item">
					<view class="label">
						<image src="/static/icon/rider/logout.png" class="l-img"/>
						<text> 退出登录 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
			</view>
		</view>
	</view>
	<SelectTime ref="selectTimeRef" @selectedTime="selectTime" />
	<TabBar tabType="rider" :currentPage="3" />
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import TabBar from '@/components/TabBar.vue';
	import UserInfo from './components/UserInfo.vue';
	import SelectTime from '@/components/SelectTime.vue';
	import { GetRiderInfoApi, EditRiderInfoApi } from '@/service/rider.js'
  import { useCommStore } from '@/store/index.js'
	const selectTimeRef = ref()
	const status = ref(true)
	const riderInfo = ref({
		avatar: '',
		name: '',
		order_num: '', // 接单数量
		rider_deposit: '', // 我的钱包
		rider_deposit_zong: '', // 总收入
		goods_comment: '', // 好评率
		on_line: '1', // 1在线 0不在线
		work_start_time: '', // 开始时间
		work_over_time: '', // 开始时间
		hellp_mobile: '' ,// 骑手端客服电话
		apply: {
			region: "", //工作城市
			region_info: "", //工作地点
			id_code: "", //证件号
			id_img_1: "", //身份证正面
			id_img_2: "", //身份证反面
			id_img_3: "" //手持身份证
		},
		score: '', // 评分
	})
	const getRiderInfo = () => {
		GetRiderInfoApi().then(res => {
			riderInfo.value = res.data
		})
	}
	const selectTime = (e) => {
		const time = e.split('至')
		let params = {
			work_start_time: time[0],
			work_over_time: time[1]
		}
		EditRiderInfoApi(params).then(res => {
			riderInfo.value.work_start_time = time[0]
			riderInfo.value.work_over_time = time[1]
		})
		selectTimeRef.value.close()
	}
	const switchStatus = () => {
		let on_line = riderInfo.value.on_line == 1? 0:1
		EditRiderInfoApi({on_line}).then(res => {
			riderInfo.value.on_line = on_line
		})
	}
	const nav = (url) => uni.navigateTo({ url })
	const goHome = () => uni.reLaunch({ url: '/pages/index/index' })
	const goMyMsg = () => getApp().globalData.toast('暂未开放')
	const call = () => {
    const { comm } = useCommStore()
		uni.makePhoneCall({ phoneNumber: comm.hellp_mobile2 })
	}
	onShow(() => {
		getRiderInfo()
	})
</script>

<style lang="scss" scoped>
	.rider-mine {
		.content {
			padding: 0 12px 68px;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 68px);
			padding-bottom: calc(env(safe-area-inset-bottom) + 68px);
			box-sizing: border-box;
		}
		.wallet {
			width: 100%;
			height: 74px;
			display: flex;
			padding: 0 12px;
			align-items: center;
			border-radius: 10px;
			box-sizing: border-box;
			justify-content: space-between;
			background: linear-gradient( 314deg, #FF8508 0%, #FF4847 100%);
			.left {
				.title {
					color: #FFFFFF;
					font-size: 12px;
					font-weight: 400;
					line-height: 22px;
					margin-bottom: 7px;
				}
				.price {
					color: #FFFFFF;
					font-size: 20px;
					font-weight: 700;
					line-height: 22px;
				}
			}
			.w-img {
				width: 14px;
				height: 14px;
			}
		}
		.billing-details, .rider-status, .cooper-shop, .logout {
			padding: 0 12px;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10px;
			margin-top: 10px;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #eeeeee;
				&:nth-last-of-type(1) {
					border-bottom: 0;
				}
				.label {
					display: flex;
					align-items: center;
					.l-img {
						width: 22px;
						height: 22px;
						margin-right: 10px;
					}
					text {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						line-height: 19px;
					}
				}
				.value {
					display: flex;
					align-items: center;
					.v-img {
						width: 14px;
						height: 14px;
						margin-left: 4px;
					}
					text {
						color: #D8D8D8;
						font-size: 14px;
					}
					.switch {
						width: 40px;
					}
				}
			}
		}
	}
</style>
